<script setup>

// 当前登录的员工信息
import {PROJECT_INFO} from "../../const/index.js";
import MyNav from "../../components/MyNav.vue";
import {dateFormat, genderFormat} from "../../util/index.js";

const emp = JSON.parse(sessionStorage.getItem('loginEmp'));
// 当前登录的员工头像
const avatar = PROJECT_INFO.minioHost + '/avatar/' + emp['avatar'];

// 路径导航
const navItems = [
  {icon: 'House', label: 'DashBoard', url: '/DashBoard'},
  {icon: 'View', label: '个人信息'},
];
</script>

<template>
  <my-nav :items="navItems"/>
  <el-divider/>
  <div class="personal-body">
    <el-row :gutter="20">
      <el-col :span="6">
        <el-image  class="avatar" :src="avatar"></el-image>
        <el-divider/>
        <el-descriptions border column="1">
          <el-descriptions-item label="登录账号">{{ emp['username'] }}</el-descriptions-item>
          <el-descriptions-item label="真实姓名">{{ emp['realname'] }}</el-descriptions-item>
          <el-descriptions-item label="入职时间">{{ dateFormat(emp['hiredate']) }}</el-descriptions-item>
          <el-descriptions-item label="创建时间">{{ dateFormat(emp['created']) }}</el-descriptions-item>
          <el-descriptions-item label="修改时间">{{ dateFormat(emp['updated']) }}</el-descriptions-item>
        </el-descriptions>
      </el-col>
      <el-col :span="18">
        <el-descriptions title="当前员工详细信息" border column="1">
          <el-descriptions-item label="所属部门">{{ emp['dept'] ? emp['dept']['title'] : '暂未分配部门' }}</el-descriptions-item>
          <el-descriptions-item label="员工年龄">{{ emp['age'] }}</el-descriptions-item>
          <el-descriptions-item label="员工性别">{{ genderFormat(emp['gender']) }}</el-descriptions-item>
          <el-descriptions-item label="所属省份">{{ emp['province'] }}</el-descriptions-item>
          <el-descriptions-item label="手机号码">{{ emp['phone'] }}</el-descriptions-item>
          <el-descriptions-item label="微信号码">{{ emp['wechat'] }}</el-descriptions-item>
          <el-descriptions-item label="电子邮件">{{ emp['email'] }}</el-descriptions-item>
          <el-descriptions-item label="身份证号">{{ emp['idcard'] }}</el-descriptions-item>
          <el-descriptions-item label="现居住地" :span="2">
            <el-card>
              {{ emp['address'] }}
            </el-card>
          </el-descriptions-item>
          <el-descriptions-item label="员工描述" :span="2">
            <el-card style="height: 200px">
              {{ emp['info'] }}
            </el-card>
          </el-descriptions-item>
        </el-descriptions>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped lang="scss">

.personal-body {
  margin: 20px auto 0;
}

.avatar {
  width: 355px; //宽度
  height: 355px; //高度
  border-radius: 10%; ;// 圆角
}
</style>